<!DOCTYPE html>
<html lang="en">S
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时</title>
<script src="./vue.js"></script>
<style>
 #div{
 font-size: 25px;
 }
 span{
 color: red;
 }
</style>
</head>
<body>
<div id="div">
 剩余支付时间 : <span> {{count}} </span>
</div>
</body>
<script>
    const vm = new Vue({
 el:"#div",
 data() {
 return {
                
               count:'',
               time:864000
            };
        },
        mounted() {
            // 调用方法
            this.Time()
        },
        methods:{
            fay(){
                // 天
                let d = parseInt(this.time / (24 * 60 * 60))
                d = d < 10 ? "0" + d : d
                // console.log(d);
                // 时
                let h = parseInt(this.time / (60 * 60)  % 24)
                h = h < 10 ? "0" + h : h
                // console.log(h);
                // 分
                let s = parseInt(this.time / 60 % 60)
                s = s < 10 ? "0" + s : s
                // console.log(s);+
                // 秒
                let m = parseInt(this.time % 60)
                m = m < 10 ? "0" + m : m
                // console.log(m);
                // 将数据拼接起来
                this.count = d + "天" + h + "时" + s + "分" + m + "秒"
            },
            // 定时器每过一秒让数量减1
           Time(){
 // 开启计时器
 setInterval(()=>{

this.time -= 1

                    this.fay()
                },1000)
           }
        }
    })
</script>
</html>